/**
 * 人员培训-满意度调查详情
 */
<template>
    <el-form v-loading="loading" :model="formData" :rules="currentFormRules" ref="formRef" label-width="120px" :scroll-to-error="true">
        <vp-card>
            <template #header>
                <vp-label zh="基本信息" en="Basic Info" />
            </template>
            <el-row>
                <vp-col :span="4">
                    <el-form-item>
                        <template #label><vp-label zh="教员" en="Trainer" /></template>
                        <el-link @click="handleViewPersonnelFile(formData.jydaid)">{{ formData.dabh + ' ' + formData.jyxm }}</el-link>
                    </el-form-item>
                </vp-col>
                <vp-col :span="4">
                    <el-form-item>
                    <template #label><vp-label zh="下发日期" en="Issue Date"/></template>
                        <span>{{ (formData.xfsj || '').substring(0, 10) }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="1">
                    <el-form-item>
                        <template #label><vp-label zh="涉及课程/说明" en="Course Desc"/></template>
                        <el-link @click="handleViewTrainingPlan(formData.pxid)">
                            {{ (formData.sjKsrq || '') + ' ' + (formData.kcmcZw || '') + ' ' + 
                               (formData.kcmcYw || '') +  ' ' + (formData.pxbh || '') + ' ' + (formData.fbt || '')}}
                        </el-link>
                    </el-form-item>
                </vp-col>
            </el-row>
        </vp-card>
        <vp-card>
            <template #header>
                <vp-label zh="评分项目" en="Scoring Items" />
            </template>
            <vp-table :data="formData.raterItems">
                <el-table-column type="index" align="center" label="#"></el-table-column>
                <el-table-column prop="xm" min-width="300" show-overflow-tooltip>
                    <template #header><vp-label zh="评分项目" en="Scoring Items"/></template>
                </el-table-column>
                <el-table-column width="400" show-overflow-tooltip>
                    <template #header><vp-label zh="评分（优秀 10分；良好 8-9分；一般 7分；不合格 ≤6分）" en="Grading Criteria (Excellent: 10 points; Good: 8-9 points; Average: 7 points; Unqualified: ≤6 points)"/></template>
                    <template #default="scope">
                        <el-form-item :prop="`raterItems[${scope.$index}].pf`" :rules="formRules.pf" label-width="auto" v-if="isEditPage">
                            <el-input v-model="scope.row.pf" @input="(val:string) => {scope.row.pf = verifiyNumberInteger(val) }" maxlength="6" />
                        </el-form-item>
                        <span v-else>{{ scope.row.pf }}</span>
                    </template>
                </el-table-column>
            </vp-table>
            <el-divider class="mb10" />
            <div style="font-size: 16px;font-weight: bold;text-align: center;">
                <span>总分：</span>
                <span>{{ total }}</span>
            </div>
        </vp-card>
    </el-form>
</template>
<script setup lang="ts" name="satisfactionSurvey">
import { ref, computed } from 'vue';
import validateUtils from '/@/utils/validateUtils';
import { verifiyNumberInteger } from '/@/utils/toolsValidate';
import { useRouter } from 'vue-router';

const emits = defineEmits(['formSubmited']);
const props = defineProps({
    // 页面类型
	type: {
		type: String,
		default: 'add',
	},
	// 加载状态
	loading: {
		type: Boolean,
		default: false,
	},
	// 开启验证
	enableValid: {
		type: Boolean,
		default: true,
	},
});
const formData = ref({
    id:"",
    pxid:"",
    pxbh:"",
    kcid:"",
    kcbh: "",
    kcmcZw: "",
    kcmcYw: "",
    fbt:"",
    xfsj:"",
    jydaid:"",
    jyxm:"",
    dabh: "",
    sjKsrq:"",
    raterItems: [] as any[],
});
const formRules = {
    pf:[ 
        validateUtils.notNull, 
        {
            message: "只能输入0-10之间的数字/Only numbers between 0 and 10 can be entered",
            validator: (rule: any, value: any, callback: any)=>{
                const patt = /^(\d|10)$/;
                if(value && !patt.test(value)){
                    callback(new Error())
                }else{
                    callback();
                }
            },
        } 
    ],
}

// 页面验证规则
const currentFormRules = computed(() => {
    if (!props.enableValid) {
        return {};
    }
    if (isEditPage.value) {
        return formRules;
    }
    return {};
})

const formRef = ref();

// 是否是编辑页面
const isEditPage = computed(() => {
    return props.type === 'add' || props.type === 'edit' || props.type === 'eval';
});


// 清空数据
const initFormData = ()=>{
    formData.value = {
        id:"",
        pxid:"",
        pxbh:"",
        kcid:"",
        kcbh: "",
        kcmcZw: "",
        kcmcYw: "",
        fbt:"",
        xfsj:"",
        jydaid:"",
        jyxm:"",
        dabh: "",
        sjKsrq:"",
        raterItems: [] as any[],
    }
}

// 回显数据
const setData = (data: any) => {
    initFormData();
    formData.value = {
        ...formData.value,
        ...data,
        raterItems: !data.raterItems || data.raterItems.length === 0 ? data.items : data.raterItems,
    };
}

/**
 * 获取数据
 */
const getData = (): Promise<any>=>{
    return new Promise((resolve, reject) => {
        formRef.value.validate((valid: boolean) => {
            const data = {
                ...formData.value,
                zf: total.value,
            };
            if (valid) {
                resolve(data);
            } else {
                reject();
            }
        })
    })
}

// 查看人员档案
const router = useRouter();
const handleViewPersonnelFile = (id: string) => {
	router.push({
		name: "viewTrainingPersonnelFile",
		params: {
			id: id,
		},
	})
}

// 总分
const total = computed(() => {
    let total = 0;
    (formData.value.raterItems || []).forEach((item: any) => {
        total += parseInt(item.pf || 0);
    })
    return total;
})

// 查看培训计划
const handleViewTrainingPlan = (id: string)=>{
	router.push({
		name: "viewTrainingPlan",
		params: {
			id: id,
		},
	})
}

defineExpose({
    setData,
    getData,
})

</script>
<style scoped lang="scss">
</style>